"use client";

import * as React from "react";

import { type DropdownMenuProps } from "@radix-ui/react-dropdown-menu";

import {
  KeyboardIcon,
  MoreHorizontalIcon,
  SubscriptIcon,
  SuperscriptIcon,
} from "lucide-react";
import { KEYS } from "platejs";
import { useEditorRef } from "platejs/react";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/plate/ui/dropdown-menu";

import { ToolbarButton } from "./toolbar";

export function MoreToolbarButton(props: DropdownMenuProps) {
  const editor = useEditorRef();
  const [open, setOpen] = React.useState(false);

  return (
    &lt;DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}&gt;
      &lt;DropdownMenuTrigger asChild&gt;
        &lt;ToolbarButton pressed={open} tooltip="Insert"&gt;
          &lt;MoreHorizontalIcon /&gt;
        &lt;/ToolbarButton&gt;
      &lt;/DropdownMenuTrigger&gt;

      &lt;DropdownMenuContent
        className="ignore-click-outside/toolbar flex max-h-[500px] min-w-[180px] flex-col overflow-y-auto"
        align="start"
      &gt;
        &lt;DropdownMenuGroup&gt;
          &lt;DropdownMenuItem
            onSelect={() =&gt; {
              editor.tf.toggleMark(KEYS.kbd);
              editor.tf.collapse({ edge: "end" });
              editor.tf.focus();
            }}
          &gt;
            &lt;KeyboardIcon /&gt;
            Keyboard input
          &lt;/DropdownMenuItem&gt;

          &lt;DropdownMenuItem
            onSelect={() =&gt; {
              editor.tf.toggleMark(KEYS.sup, {
                remove: KEYS.sub,
              });
              editor.tf.focus();
            }}
          &gt;
            &lt;SuperscriptIcon /&gt;
            Superscript
            {/* (⌘+,) */}
          &lt;/DropdownMenuItem&gt;
          &lt;DropdownMenuItem
            onSelect={() =&gt; {
              editor.tf.toggleMark(KEYS.sub, {
                remove: KEYS.sup,
              });
              editor.tf.focus();
            }}
          &gt;
            &lt;SubscriptIcon /&gt;
            Subscript
            {/* (⌘+.) */}
          &lt;/DropdownMenuItem&gt;
        &lt;/DropdownMenuGroup&gt;
      &lt;/DropdownMenuContent&gt;
    &lt;/DropdownMenu&gt;
  );
}
